<template>
  <view class="app-layout">
    <app-header title="会员详情" />
    <view class="app-main">
      <view class="refund-container">
        <view class="" style=" flex: 1; overflow: hidden;">
          <scroll-view scroll-y="true" scroll-x="true" style="height: 100%">
            <view class="details-container">
              <view class="user-info-container">
                <!-- 左侧区域：头像、积分、等级、装饰文字 -->
                <view class="left-section-wrap">
                  <view class="left-section">
                    <view class="avatar-wrapper">
                      <image class="avatar" src="/static/imgs/avatar.png" mode="aspectFill"></image>
                    </view>
                    <view class="vip-badge">
                      <!-- <img src="" alt="" /> -->
                      {{ userInfo.vipLevel }}
                    </view>
                    <view class="decorate">
                      <text class="decorate-text">{{ userInfo.decorateText }}</text>
                      <image src="/static/imgs/sex1.png" mode=""></image>
                    </view>


                  </view>
                  <view class="points-card">
                    <text class="points-label">可用积分</text>
                    <view class="dashed-line"></view>
                    <text class="points-value">0</text>
                  </view>
                </view>

                <!-- 右侧区域：个人信息详情 -->
                <view class="right-section">
                  <text class="title">个人信息</text>
                  <view class="info-grid">
                    <!-- 左列 -->
                    <view class="info-column" style="flex:2">
                      <view class="info-item">
                        <text class="info-label">会员ID：</text>
                        <text class="info-value">Mc000000001</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">注册时间：</text>
                        <text class="info-value">2025-08-08 08:08:08</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">消费金额：</text>
                        <text class="info-value">¥1000.00</text>
                      </view>
                    </view>
                    <!-- 中列 -->
                    <view class="info-column" style="flex:2">
                      <view class="info-item">
                        <text class="info-label">个人电话：</text>
                        <text class="info-value">177****1989</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">注册渠道：</text>
                        <text class="info-value">Mocup coffee小程序</text>
                      </view>
                    </view>
                    <!-- 右列 -->
                    <view class="info-column">
                      <view class="info-item">
                        <text class="info-label">会员状态：</text>
                        <view class="status-dot normal"></view>
                        <text class="info-value">正常</text>
                      </view>
                      <view class="info-item">
                        <text class="info-label">消费订单：</text>
                        <text class="info-value">10笔</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
             <view class="line">

             </view>
              <view class="table-container">
                <view style="width:50%">
                  <u-tabs :list="tabListAll" @click="tabClick1" :scrollable="true" keyName="name"
                    :activeStyle="{ color: '#0F90FD', fontWeight: '500', fontSize: '16px' }">
                    <template #content="{ item, keyName, index }">
                      <view style="position: relative">
                        {{ item[keyName] }}
                      </view>
                    </template>
                  </u-tabs>
                </view>

                <view class="details-wrap" v-if="currentTab==0">
                  <view class="order-search">

                    <view class="" style="flex:2">
                      <uni-data-select v-model="parentId" placeholder="优惠券发放渠道" :localdata="couponList"
                        class="search-select"></uni-data-select>
                    </view>
                    <view class="" style="flex:2">
                      <uni-data-select v-model="parentId" placeholder="优惠券类型" :localdata="couponList"
                        class="search-select"></uni-data-select>
                    </view>
                    <view class="" style="flex:1">
                      <uni-data-select v-model="parentId" placeholder="可使用" :localdata="couponList"
                        class="search-select"></uni-data-select>
                    </view>
                    <view class="" style="flex:2">
                      <u-search placeholder="请输入优惠券ID" v-model="keyword" clearable bgColor="#fff" borderColor="#e5e5e5"
                        :showAction="false" @search="handleSearch" @clear="handleReset"></u-search>
                    </view>
                    <view class="" style="flex:3">
                      <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" @change="handleTime"
                        class="search-date" />
                    </view>
                    <view class="flex-row" style="flex: 1">
                      <u-button type="primary" text="搜索" @click="handleSearch"></u-button>
                      <u-button :plain="true" text="重置" @click="handleReset"></u-button>
                    </view>
                  </view>
                  <!-- <view class="coupon-empty">
                    <image src="/src/static/imgs/discount.png" mode=""></image>
                    <text>当前用户暂无可用优惠券~</text>
                  </view> -->
                  <view class="" style=" flex: 1; overflow: hidden;">
                    <!-- <scroll-view scroll-y="true" style="height: 100%"> -->
                    <view class="coupon-list">
                      <view class="coupon-card" v-for="(coupon,index) in coupons" :key="index">
                        <view class="coupon-tag">{{ coupon.tag }}</view>
                        <view class="coupon-top">
                          <text class="coupon-name">{{ coupon.name }}</text>
                          <view class="coupon-amount-row">
                            <text class="coupon-amount">¥{{ coupon.amount }}</text>
                            <text class="coupon-rule">{{ coupon.rule }}</text>
                          </view>
                        </view>

                        <view class="coupon-dashed-line"></view>
                        <view class="coupon-bottom">
                          <text class="coupon-expire">有效期：{{ coupon.startTime }} 至 {{ coupon.endTime }}</text>
                        </view>
                      </view>
                    </view>
                    <!-- </scroll-view> -->
                  </view>

                </view>

                <view class="details-wrap" v-if="currentTab==1">
                  <view class="order-search">
                    <view class="" style="flex:0.5">
                      <u-search placeholder="请输入订单号" v-model="keyword" clearable bgColor="#fff" borderColor="#e5e5e5"
                        :showAction="false" @search="handleConsumSearch" @clear="handleReset"></u-search>
                    </view>
                    <view class="flex-row" style="flex: 1">
                      <u-button type="primary" text="搜索" @click="handleConsumSearch"></u-button>
                      <u-button :plain="true" text="重置" @click="handleConsumReset"></u-button>
                    </view>
                  </view>
                  <view class="" style="margin: 20px 0px 20px 20px; flex: 1; overflow: hidden;">
                    <!-- <scroll-view scroll-y="true" style="height: 100%"> -->
                    <uni-table border stripe emptyText="暂无更多数据">
                      <uni-tr>
                        <uni-th align="left" width="200">订单编号</uni-th>
                        <uni-th align="left" width="100">消费门店</uni-th>
                        <uni-th align="left" width="150">消费时间</uni-th>
                        <uni-th align="left" width="100">消费金额</uni-th>
                        <uni-th align="left" width="150">渠道</uni-th>
                        <uni-th align="left" width="80">业务订单</uni-th>
                        <uni-th align="left" width="80">订单状态</uni-th>
                      </uni-tr>
                      <uni-tr v-for="(item, index) in consumptionList" :key="item">
                        <uni-td>
                          <text>1298361964016206312</text>
                        </uni-td>
                        <uni-td>
                          <text>西安钟楼店</text>
                        </uni-td>
                        <uni-td>
                          <text>2025-08-08 08:08:08</text>
                        </uni-td>
                        <uni-td>
                          <text class="suffix-num">￥190.00</text>
                        </uni-td>
                        <uni-td>
                          <text>Mocup coffee小程序</text>
                        </uni-td>
                        <uni-td>
                          <text>门店自提</text>
                        </uni-td>
                        <uni-td>
                          <text>待支付</text>
                        </uni-td>
                      </uni-tr>
                    </uni-table>
                    <!-- </scroll-view> -->
                  </view>
                </view>


                <view class="details-wrap" v-if="currentTab==2">
                  <view class="order-search">

                    <view class="" style="flex:1">
                      <uni-data-select v-model="parentId" placeholder="变动类型" :localdata="couponList"
                        class="search-select"></uni-data-select>
                    </view>
                    <view class="" style="flex:1">
                      <uni-data-select v-model="parentId" placeholder="状态" :localdata="couponList"
                        class="search-select"></uni-data-select>
                    </view>
                    <view class="" style="flex:2">
                      <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" @change="handleTime"
                        class="search-date" />
                    </view>

                    <view class="flex-row" style="flex: 1">
                      <u-button type="primary" text="搜索" @click="handleDetailSearch"></u-button>
                      <u-button :plain="true" text="重置" @click="handleDetailReset"></u-button>
                    </view>
                  </view>
                  <view class="" style="margin: 20px 10px 20px 20px; flex: 1; overflow: hidden;">
                    <!-- <scroll-view scroll-y="true" style="height: 100%"> -->
                    <uni-table border stripe emptyText="暂无更多数据">
                      <uni-tr>
                        <uni-th align="left" width="200">积分流水号</uni-th>
                        <uni-th align="left" width="120">变动类型</uni-th>
                        <uni-th align="left" width="100">变动数值</uni-th>
                        <uni-th align="left" width="100">剩余积分</uni-th>
                        <uni-th align="left" width="200">交易时间</uni-th>
                        <uni-th align="left" width="200">有效期</uni-th>
                        <uni-th align="left" width="80">状态</uni-th>
                        <uni-th align="left" width="200">订单号</uni-th>
                      </uni-tr>
                      <uni-tr v-for="(item, index) in consumptionList" :key="item">
                        <uni-td>
                          <text>JF202508080001</text>
                        </uni-td>
                        <uni-td>
                          <text>消费返积分</text>
                        </uni-td>
                        <uni-td>
                          <text class="status-g">+20</text>
                        </uni-td>
                        <uni-td>
                          <text>30</text>
                        </uni-td>
                        <uni-td>
                          <text>2025-08-08 08:08:08</text>
                        </uni-td>
                        <uni-td>
                          <text>2025-08-08 08:08:08</text>
                        </uni-td>
                        <uni-td>
                          <view class="status-dot normal"></view>
                          <text>正常</text>
                        </uni-td>
                        <uni-td>
                          <text>1298361964016206312</text>
                        </uni-td>
                      </uni-tr>
                    </uni-table>
                    <!-- </scroll-view> -->
                  </view>
                </view>

              </view>

            </view>
          </scroll-view>
        </view>
        <view class="submit_btncon">
          <view style="display: flex; margin: auto">
            <button class="submit_close" style="padding:0 32px" @click="handleAdjust">积分调整</button>
            <button class="submit_btn" style="padding:0 18px" @click.stop="handleEdit(item)">编辑会员信息</button>
          </view>
        </view>
      </view>
    </view>
    <editForm :showPopup="showEditPopup" v-if="showEditPopup" :spuId="spuId" @closePopup="closeEditPopup"
      @surePopup="sureEditPopup" />
  </view>
</template>
<script setup>
  import {
    ref,
    computed
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getOrder,
    applySubmit
  } from '@/requests/apis/order'
  import editForm from './components/editForm.vue'
  let showEditPopup = ref(false)
  let couponList = ref([{
      value: 0,
      text: "篮球"
    },
    {
      value: 1,
      text: "足球"
    },
    {
      value: 2,
      text: "游泳"
    },
  ])
  let tabListAll = ref([{
      name: '优惠券'
    },
    {
      name: '订单消费明细'
    },
    {
      name: '积分明细'
    }
  ])
  let userInfo = ref({
    avatar: '/static/avatar.png',
    points: 0,
    vipLevel: 'V7级',
    decorateText: '大吉大利',
    memberId: 'Mc000000001',
    phone: '177****1989',
    status: '正常',
    registerTime: '2025-08-08 08:08:08',
    registerChannel: 'Mocup coffee小程序',
    orderCount: '10笔',
    consumeAmount: '¥1000.00'
  });
  let coupons = [{
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }, {
    name: '优惠券名称',
    amount: '150.00',
    rule: '无门槛使用',
    startTime: '2025-07-12',
    endTime: '2025-08-12',
    tag: '立减券'
  }];
  let consumptionList = ref([{}, {}, {}])
  let currentTab = ref(0)
  onLoad(async (e) => {

  })
  const tabClick1 = (e) => {
    let obj = {
      '优惠券': 0,
      '订单消费明细': 1,
      '积分明细': 2,
    };
    currentTab.value = obj[e.name];
  }
  // 优惠券搜索
  const handleSearch = () => {

  }
  // 优惠券重置
  const handleReset = () => {

  }
  // 消费搜索
  const handleConsumSearch = () => {

  }
  // 消费重置
  const handleConsumReset = () => {

  }
  // 明细搜索
  const handleDetailSearch = () => {

  }
  // 明细重置
  const handleDetailReset = () => {

  }
  // 点击编辑
  const handleEdit = () => {
    showEditPopup.value = true;
  }
  // 确定编辑
  const sureEditPopup = () => {
    showEditPopup.value = false;
  }
  // 关闭提编辑弹窗
  const closeEditPopup = () => {
    showEditPopup.value = false
  }
  // 积分调整
  const handleAdjust = () => {
    uni.navigateTo({
      url: '/pages/vip/pointsAdjustment',
    })
  }
</script>
<style lang="scss" scoped>
  .refund-container {
    margin: 10px 10px 0;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 999;

    :deep(.uni-date-mask--pc) {
      position: static !important;
    }

    :deep(.uni-table-scroll) {
      width: auto !important;
      margin-right: 10px;
    }

    :deep(.uni-select__input-placeholder) {
      font-size: 14px !important;
    }
    :deep(.uni-select__selector){
      z-index: 4px !important;
    }

    .details-container {
      display: flex;
      flex-direction: column;
      height: 100%;

      .user-info-container {
        display: flex;
        padding: 30px 38px 20px 38px;
        // margin-bottom: 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 6px;
        align-items: flex-start;

        .left-section-wrap {
          display: flex;
          margin-right: 32px;

          // 左侧区域
          .left-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 21px;

            .avatar-wrapper {
              .avatar {
                width: 80px;
                height: 80px;
                border-radius: 50%;
              }
            }

            .vip-badge {
              background: linear-gradient(90deg, #FF784F 0%, #FFA26B 100%);
              border-radius: 10px;
              color: #fff;
              font-weight: 500;
              font-size: 12px;
              color: #FFFFFF;
              padding: 2px 6px;
            }

            .decorate {
              display: flex;
              margin-top: 10px;

              image {
                width: 18px;
                height: 18px;
              }

              .decorate-text {
                font-weight: 500;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                margin-right: 6px;
              }
            }


          }

          .points-card {
            width: 90px;
            height: 70px;
            background: #FFF4F3;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            &::before,
            &::after {
              content: '';
              position: absolute;
              width: 8px;
              height: 8px;
              background-color: #fff;
              border-radius: 50%;
              top: 50%;
              transform: translateY(-50%);
            }

            &::before {
              left: -4px;
            }

            &::after {
              right: -4px;
            }

            .points-label {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              line-height: 20px;
              margin-top: 9px;
              margin-bottom: 6px;
            }

            .dashed-line {
              width: 100%;
              height: 1px;
              background: linear-gradient(to right,
                  #ffcccc 0%,
                  #ffcccc 40%,
                  transparent 40%,
                  transparent 60%,
                  #ffcccc 60%,
                  #ffcccc 100%);
              background-size: 3px 1px;
              margin-bottom: 4px;
            }

            .points-value {
              font-weight: bold;
              font-size: 18px;
              color: #FF5030;
              line-height: 21px;
            }
          }
        }

        // 右侧区域
        .right-section {
          flex: 1;

          .title {
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            margin-bottom: 6px;
            display: block;
          }

          .info-grid {
            display: flex;
            // gap: 40px;

            .info-column {
              flex: 1;
            }

            .info-item {
              display: flex;
              align-items: center;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              line-height: 40px;
            }

            .status-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 3px;
              display: inline-block;
              background-color: #F32F1D;
            }

            .status-dot.normal {
              background-color: #07c160;
            }
          }



        }
      }
.line {
      padding: 5px 0;
      background: #F7F8FA;
    }
      .table-container {
        background-color: #fff;
        border-radius: 6px;
        flex: 1;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        // overflow: hidden;

        :deep(.u-tabs) {
          width: 100% !important;

          .u-tabs__wrapper__nav__item {
            flex: 1 !important;
          }

          .u-tabs__wrapper__nav__item__text {
            white-space: nowrap;
          }
        }

        .details-wrap {
          display: flex;
          flex-direction: column;
          height: 100%;
          // overflow: hidden;

          .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 3px;
            display: inline-block;
            background-color: #F32F1D;
          }

          .status-dot.normal {
            background-color: #52C41A;
          }

          .status-g {
            color: #52C41A;
          }

          .status-r {
            color: #F32F1D;
          }


          .order-search {
            display: flex;
            background-color: #fff;
            padding: 12px 20px 12px 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #E8ECEF;
            gap: 10px;

            :deep(button) {
              width: 74px;
              height: 38px;
              margin-left: 11px;
              margin-right: 0;
              border-radius: 100px;
              &:first-of-type{
                margin-left: 0;
              }
            }

            :deep(.u-search) {
              .u-search__content__input {
                height: 35px !important;
                line-height: 35px !important;
                display: block;
              }

            }

            :deep(.uni-date-x--border) {
              border-radius: 100px !important;
            }

            :deep(.uni-date-x) {
              border-radius: 100px !important;
            }

            :deep(.uni-select) {
              border-radius: 100px !important;
            }
          }

          .coupon-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10vh;

            image {
              width: 66px;
              height: 66px;
              margin-bottom: 6px;
            }

            text {
              font-weight: 400;
              font-size: 12px;
              color: #999999;
              line-height: 17px;
            }
          }

          .coupon-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 10px;
            background-color: #fff;

            .coupon-card {
              width: calc(25% - 7.5px);
              box-sizing: border-box;
              background: #FFF4F3;
              border-radius: 8px;

              position: relative;
              display: flex;
              flex-direction: column;

              .coupon-tag {
                position: absolute;
                top: 0;
                right: 0;
                padding: 2px 8px;
                font-size: 12px;
                color: #fff;
                background: linear-gradient(227deg, #FF8260 0%, #EC2A30 100%);
                border-radius: 0px 10px 0px 10px;
                backdrop-filter: blur(1.017395152505445px);
                z-index: 3;
              }

              .coupon-top {
                padding: 10px 17px;
                box-sizing: border-box;

                .coupon-name {
                  font-weight: 500;
                  font-size: 12px;
                  color: rgba(0, 0, 0, 0.7);
                  line-height: 17px;
                  display: block;
                  margin-bottom: 7px;
                }

                .coupon-amount-row {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .coupon-amount {
                    font-weight: bold;
                    font-size: 18px;
                    color: #FF5030;
                    line-height: 21px;
                  }

                  .coupon-rule {
                    font-weight: 400;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.5);
                    line-height: 17px;
                  }
                }
              }

              .coupon-dashed-line {
                position: relative;
                height: 1px;
                background: linear-gradient(to right,
                    #ffcccc 0%,
                    #ffcccc 40%,
                    transparent 40%,
                    transparent 60%,
                    #ffcccc 60%,
                    #ffcccc 100%);
                background-size: 3px 1px;

                // 左侧半圆缺口
                &::before {
                  content: '';
                  position: absolute;
                  left: -4px;
                  top: 50%;
                  transform: translateY(-50%);
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: #fff;
                  z-index: 1;
                }

                // 右侧半圆缺口
                &::after {
                  content: '';
                  position: absolute;
                  right: -4px;
                  top: 50%;
                  transform: translateY(-50%);
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: #fff;
                  z-index: 1;
                }
              }

              .coupon-bottom {
                padding: 8px 17px;
                box-sizing: border-box;

                .coupon-expire {
                  font-weight: 400;
                  font-size: 12px;
                  color: rgba(0, 0, 0, 0.5);
                  line-height: 17px;
                }
              }
            }
          }
        }


      }

    }

  }
</style>
